<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .container{
        height: 400px;
        overflow-x: auto;
        flex: 1;
    }
    .container div{
        height: 20px;
    }
</style>
<body>
<div id="app">
    <!-- stop 案例 -->
    <div @click="clickTargetContainer">
        <button @click.stop="clickTargetA">点我 stop 案例</button>
        <button @click="clickTargetA">点我 无 stop 修饰</button>
    </div>

    <!-- submit.prevent 案例 -->
    <form method="get" action="/" @submit.prevent="submit">
        <button type="submit">点我提交表单</button>
    </form>

    <form method="get" action="https://www.baidu.com" @submit="submit">
        <button type="submit">点我提交表单</button>
    </form>

    <!-- capture 案例 -->
    <div v-on:click.capture="capture">
        <button @click.stop="clickTargetA">点我 capture 案例</button>
    </div>

    <!-- self 案例 -->
    <div @click.self="clickTargetContainer" style="padding: 20px;border: 1px solid #cccccc;">
        <button @click="clickTargetA">点我 self 案例</button>
    </div>

    <!-- once 案例 -->
    <div>
        <button @click.once="clickTargetA">点我 once 案例</button>
    </div>

</div>
</body>
<script src="../../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            clickTargetContainer() {
                alert('父级容器点击事件触发')
            },
            clickTargetA() {
                alert('按钮标签点击事件触发')
            },
            submit() {
                alert('提交表单了')
            },
            capture() {
                alert('虽然你点击的是内部元素，但是我先触发！')
            }
        }
    })
</script>
</html>
